import { GStyleSheet } from '@/utils/DarkMode';
import { View, Text, Image } from '@tarojs/components';
import { FC, Fragment, useEffect, useMemo, useState, useRef } from 'react';
import { Backdrop, ConfigProvider } from '@taroify/core';
import { Success } from '@taroify/icons';
import Taro from '@tarojs/taro';
import i18n from 'i18n-js';
import { TypePickerOptionEnum } from '../utils'

const arrow =
  'https://xbgroup-static.gizwits.com/cybertron/users/495101/media/%E4%B8%89%E8%A7%92%E5%BD%A2@3x_1695092750073.png';

const dstyle = GStyleSheet.create({
  container: {
    height: 40,
    width: 110,
    borderRadius: 18,
    backgroundColor: '#fff',
    zIndex: 991,
  },
  arrow: {
    height: 8,
    width: 8,
    marginLeft: 8,
  },
  window: {
    width: 200,
    height: 210,
    position: 'absolute',
    left: 20,
    borderRadius: 12,
    backgroundColor: '#fff',
    paddingTop: 8,
    paddingBottom: 8,
  },
  windowItem: {
    height: '25%',
    justifyContent: 'space-between',
    padding: '0px 15px 0px 25px',
  },
});

interface TypePickerProps {
  onChange: (type: TypePickerOptionEnum) => void;
  type: TypePickerOptionEnum;
}

const TypePicker: FC<TypePickerProps> = props => {
  const { onChange, type } = props;
  const styles = dstyle.useDynamicStyle();
  const [show, setShow] = useState(false);
  const [top, setTop] = useState(130);

  const data = useRef<{ title: string; value: TypePickerOptionEnum }[]>([
      {
        title: 'ALL',
      value: TypePickerOptionEnum.all,
      },
      {
        title: 'FAULT',
        value: TypePickerOptionEnum.fault,
      },
      {
        title: 'WARN',
        value: TypePickerOptionEnum.warn,
      },
      {
        title: 'NOTI',
        value: TypePickerOptionEnum.noti,
      },
  ]
  );

  const checked = useMemo(() => data.current.find(i => i.value === type), [type, data]);

  const handleClick = () => {
    setShow(!show);
  };

  const close = () => {
    setShow(false);
  };

  useEffect(() => {
    Taro.nextTick(() => {
      Taro.createSelectorQuery()
        .select('#container')
        .boundingClientRect(rect => {
          if (rect && rect.bottom) {
            setTop(rect.bottom + 10);
          }
        })
        .exec();
    });
  }, []);

  return (
    <Fragment>
      <View style={styles.container} className='centerFlex' onClick={handleClick} id='container'>
        <Text>{i18n.t(checked!.title)}</Text>
        <Image src={arrow} style={styles.arrow} />
      </View>
      <ConfigProvider theme={{ backdropZIndex: '990' }}>
        <Backdrop open={show} closeable onClose={close}>
          <View style={{ ...styles.window, top }}>
            {data.current.map((i) => {
              const isCheck = checked!.title === i.title;
              return (
                <View
                  key={i.value}
                  style={{
                    ...styles.windowItem,
                    backgroundColor: isCheck ? '#EDEDED' : '#fff',
                  }}
                  onClick={() => onChange(i.value)}
                  className='centerFlex'
                >
                  <Text>{i18n.t(i.title)}</Text>
                  {isCheck ? <Success size={15} color='#333' /> : <Fragment />}
                </View>
              );
            })}
          </View>
        </Backdrop>
      </ConfigProvider>
    </Fragment>
  );
};

export default TypePicker;
